<template>
  <div class="foot-wrap">
    <div class="top flex justify-between">
      <div class="flex font-bold text-[20px] gap-[50px] items-start">
        <div class="title-icon"></div>
        <div class="flex items-center">
          <div class="item-icon-wrap mr-10 flex items-center justify-center">
            <i class="iconfont icon-decorate text-[20px]"></i>
          </div>
          <span>按需定制</span>
        </div>
        <div class="flex items-center">
          <div class="item-icon-wrap mr-10 flex items-center justify-center">
            <i class="iconfont icon-shopping text-[20px]"></i>
          </div>
          <span>一件起定</span>
        </div>
        <div class="flex items-center">
          <div class="item-icon-wrap mr-10 flex items-center justify-center">
            <i class="iconfont icon-logistics-land-transport text-[20px]"></i>
          </div>
          <span>一件代发</span>
        </div>
      </div>
      <div class="flex text-[14px]">
        <div>
          <p class="mb-40 font-bold">关于我们</p>
          <p class="mb-10">服务条款</p>
          <p class="mb-10">隐私条款</p>
        </div>
        <div class="ml-80">
          <p class="mb-40 font-bold">帮助中心</p>
          <p class="mb-10">使用手册</p>
          <p class="mb-10">常见问题</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.foot-wrap {
  color: #fff;
  .top {
    width: 1180px;
    margin: 0 auto;
    padding-top: 30px;
    .title-icon {
      background-image: url('https://res.songzhaopian.cn/rouzao-custom-platform/icon-white-v2.png');
      width: 102px;
      height: 26px;
      background-repeat: no-repeat;
      background-size: contain;
    }
    .item-icon-wrap {
      height: 40px;
      width: 40px;
      border-radius: 50%;
      border: 1px solid #525866;
    }
  }
}
</style>
